{% extends "base.html" %}

{% block title %}外部系统 - 惠农平台{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">外部系统状态</h5>
                </div>
                <div class="card-body">
                    <div id="systemStatus" class="mb-4">
                        <div class="alert alert-info" role="alert">
                            正在检查系统状态...
                        </div>
                    </div>
                    
                    <div class="text-center">
                        <a href="http://localhost:8080/" target="_blank" class="btn btn-primary" id="dashboardLink">
                            打开数据监控仪表板
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function checkSystemStatus() {
    fetch('/api/check_external_system')
        .then(response => response.json())
        .then(data => {
            const statusDiv = document.getElementById('systemStatus');
            const dashboardLink = document.getElementById('dashboardLink');
            
            if (data.accessible) {
                const status = data.status;
                let statusHtml = '<div class="alert alert-success" role="alert">';
                statusHtml += '<h5>系统状态正常</h5>';
                statusHtml += `<p>Redis连接: ${status.redis_connected ? '正常' : '异常'}</p>`;
                statusHtml += `<p>爬虫状态: ${status.spider_running ? '运行中' : '已停止'}</p>`;
                statusHtml += `<p>数据总量: ${status.data_count} 条</p>`;
                if (status.last_update) {
                    statusHtml += `<p>最后更新: ${new Date(status.last_update).toLocaleString()}</p>`;
                }
                statusHtml += '</div>';
                statusDiv.innerHTML = statusHtml;
                dashboardLink.classList.remove('disabled');
            } else {
                statusDiv.innerHTML = `
                    <div class="alert alert-danger" role="alert">
                        <h5>系统状态异常</h5>
                        <p>无法连接到数据监控仪表板，请检查系统是否正常运行。</p>
                    </div>
                `;
                dashboardLink.classList.add('disabled');
            }
        })
        .catch(error => {
            console.error('检查系统状态失败:', error);
            document.getElementById('systemStatus').innerHTML = `
                <div class="alert alert-danger" role="alert">
                    <h5>检查状态失败</h5>
                    <p>检查系统状态时发生错误，请稍后重试。</p>
                </div>
            `;
        });
}

// 页面加载时检查状态
checkSystemStatus();

// 每30秒自动刷新一次状态
setInterval(checkSystemStatus, 30000);
</script>
{% endblock %} 